// import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

import styles from "../MainLayout/MainLayout.module.css";
import {

  BellOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Dropdown, Avatar, Space } from "antd";

const HeaderRigth = () => {
  const navigate = useNavigate();
  const Dropdownitems = [
    {
      label: "Submit and continue",
      key: "1",
    },
  ];
  const DropdownAdmin = [
    {
      label: "个人信息",
      key: "1",
      path: "/user",
      onClick: () => {
        console.log("点击了通知 1");
        // 处理通知 1 的逻辑（如标记已读）
      },
    },
    {
      label: "我的消息",
      key: "2",
      path: "/messear",
      onClick: () => {
        console.log("点击了通知 2");
        // 处理通知 1 的逻辑（如标记已读）
      },
    },
    {
      type: "divider",
    },
    {
      label: "退出登录",
      key: "3",
      path: "/outLogin",
      onClick: () => {
        console.log("点击了通知 3");
        navigate("/login");
      },
    },
  ];
  return (
    <div className={styles.rigthBox}>
      <Space wrap size={16}>
        <Dropdown trigger={["click", "hover"]} menu={{ items: Dropdownitems }}>
          <BellOutlined style={{ fontSize: "24px", verticalAlign: "middle",color:'#fff' }} />
        </Dropdown>
        <Dropdown
          trigger={["click", "hover"]}
          menu={{ items: DropdownAdmin }}
          arrow={true}
        >
          <Space wrap size={16}>
            <Avatar size={32} icon={<UserOutlined />} />
            <span style={{color:'#fff'}}>admin</span>
          </Space>
        </Dropdown>
      </Space>
    </div>
  );
};
export default HeaderRigth;
